<template>
  <view class="parkBillXgl">
    <view class="top-part">
      <block v-if="bills.length>0">
        <view v-for="(item, index) in bills" :key="index" class="bill_box">
          <view class="order-no">
            <text space="nbsp">限时兑换</text>
          </view>

          <view class="table">
            <view class="tr">
              <view class="td1">积分</view>
              <view class="td2">{{ item.points }}</view>
            </view>
            <view class="tr">
              <view class="td1">金额</view>
              <view class="td2">{{ item.money }}</view>
            </view>
            <view class="tr">
              <view class="td1">兑换方式</view>
              <view class="td2">{{ item.channel }}</view>
            </view>
          </view>
        </view>
      </block>

      <u-empty v-else mode="history" margin-top="40%" text="暂无记录" icon="https://mm.wentsoft.com/images/empty-img/history.png" />
    </view>
  </view>
</template>
<script>
import { pointsRedeemRecordOutPage } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      searchTableQuery: {
        size: 10,
        current: 1
      },
      mycarList: [],
      bills: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  onLoad() {
    this.init()
  },
  onReachBottom() {
  },

  methods: {
    init() {
      const that = this
      wx.showLoading({
        title: '加载...'
      })
      that.searchTableQuery.cardNo = this.userInfo.cardNo
      pointsRedeemRecordOutPage(that.searchTableQuery).then(res => {
        wx.hideLoading()
        console.info(res)
        if (!res.cod) {
          return
        }
        that.bills = res.data
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.top-part {
  width: 100%;
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.bill_box {
  background: #fff;
  box-shadow: 2px 2px 4px #e0e0e0;
  border-radius: 13rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 16rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.money {
  position: absolute;
  font-size: 32rpx;
  top: 20rpx;
  right: 20rpx;
  color: red;
}
.paymethod {
  position: absolute;
  font-size: 28rpx;
  top: 70rpx;
  right: 20rpx;
  color: #f0c433;
}
.money-fee {
  position: absolute;
  font-size: 32rpx;
  top: 20rpx;
  right: 20rpx;
  color: rgb(167, 167, 167);
  background: rgb(255, 255, 255);
  text-decoration: line-through;
}
.money-else {
  position: absolute;
  font-size: 34rpx;
  top: 60rpx;
  right: 20rpx;
  color: red;
}
.paymethod-else {
  position: absolute;
  font-size: 28rpx;
  top: 110rpx;
  right: 20rpx;
  color: #f0c433;
}

.order-no {
  margin: 20rpx 20rpx 10rpx 10rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  font-size: 40;
  font-weight: bolder;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
}
.table {
  margin: 10rpx 20rpx 30rpx 10rpx;
  justify-content: flex-start;
  letter-spacing: 2rpx;
  font-size: 26rpx;
  line-height: 38rpx;
}
.tr {
  display: flex;
  width: 80%;
  justify-content: flex-start;
  align-items: center;
}
.td1 {
  display: flex;
  width: 30%;
}
.td2 {
  display: flex;
  width: 70%;
  color: rgb(167, 167, 167);
  white-space: nowrap;
  overflow: hidden;
  -webkit-line-clamp: 1;
}
.main view {
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  column-gap: 30px;
}
.entry_time {
  display: flex;
  justify-content: align-item;
  color: #141414;
  font-size: 28rpx;
  border-bottom: 1rpx;
}
.out_time {
  display: flex;
  justify-content: align-item;
  color: #141414;
  font-size: 28rpx;
  border-bottom: 1rpx;
}
.elapsed_time {
  display: flex;
  color: #141414;
  font-size: 28rpx;
  border-bottom: 1rpx;
}
.unbind {
  border: 2rpx solid #d6823b;
  color: #d6823b;
  padding: 6rpx 30rpx;
  border-radius: 26rpx;
  font-size: 26rpx;
}
.btn_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 118rpx;
}
.btn_box .btn_t {
  color: #757575;
  font-size: 26rpx;
}
.btn_box .btn {
  background-color: #d6823b;
  color: #fff;
  height: 81rpx;
  line-height: 81rpx;
  width: 85%;
  text-align: center;
  font-size: 35rpx;
  border-radius: 6rpx;
}

.top-part .title {
  font-size: 26rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  margin: 24rpx 0;
}
.license {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.edit_text {
  height: 72rpx;
  width: 72rpx;
  position: relative;
  border: 1rpx solid #727373;
  border-radius: 12rpx;
  line-height: 72rpx;
  text-align: center;
  font-size: 36rpx;
}
.license .edit_text:nth-child(2) {
  margin-right: 48rpx;
}
.license .edit_text:nth-child(2)::after {
  content: '';
  position: absolute;
  right: -34rpx;
  top: 45%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #979797;
}
.license .edit_text:nth-child(8) {
  border: 1px dashed #979797;
}
.cursor {
  width: 36rpx;
  height: 4rpx;
  background-color: #333333;
  animation: focus 1.2s infinite;
  position: absolute;
  left: 50%;
  margin-left: -18rpx;
  bottom: 14rpx;
}
.friendlyAlert {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}
.query_btn {
  background-color: #dc7233;
  width: 80%;
  height: 74rpx;
  border-radius: 10rpx;
  line-height: 74rpx;
  text-align: center;
  color: white;
  letter-spacing: 6rpx;
  margin: 0 auto;
}
.queit {
  padding: 109rpx auto;
  margin: 64rpx 180rpx;
  border-radius: 9rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 32rpx;
  background-color: #f1f1f1;
  height: 79rpx;
}
.queit .plantno {
  line-height: 79rpx;
  letter-spacing: 8rpx;
}
.queit .iconfont {
  margin: 15rpx;
  margin-left: 30rpx;
  color: #f1f1f1;
  font-size: 46rpx;
  background-color: #ccc;
  height: 44rpx;
  border-radius: 24rpx;
}
.log_box {
  padding: 54rpx 40rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.log_menu_box {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.log_menu_img {
  display: flex;
  justify-content: center;
}
.log_menu_img image {
  width: 78rpx;
  height: 78rpx;
}
</style>
